<template>
  <div class="dashboard-container">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎使用磷康健康管理后台系统！</h2>
          <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
        </div>
        <div class="welcome-icon">
          <el-icon :size="80" color="#409eff">
            <Promotion />
          </el-icon>
        </div>
      </div>
    </el-card>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #ecf5ff">
              <el-icon :size="32" color="#409eff"><User /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-value">1,234</div>
              <div class="stats-label">用户总数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #f0f9ff">
              <el-icon :size="32" color="#67c23a"><Document /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-value">856</div>
              <div class="stats-label">健康档案</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #fef0f0">
              <el-icon :size="32" color="#f56c6c"><Files /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-value">523</div>
              <div class="stats-label">体检报告</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #fdf6ec">
              <el-icon :size="32" color="#e6a23c"><Warning /></el-icon>
            </div>
            <div class="stats-content">
              <div class="stats-value">42</div>
              <div class="stats-label">待审核档案</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-card class="quick-actions-card">
      <template #header>
        <div class="card-header">
          <span>快捷操作</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-action-item" @click="handleQuickAction('user')">
            <el-icon :size="40" color="#409eff"><UserFilled /></el-icon>
            <span>用户管理</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-action-item" @click="handleQuickAction('archive')">
            <el-icon :size="40" color="#67c23a"><Checked /></el-icon>
            <span>档案审核</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-action-item" @click="handleQuickAction('report')">
            <el-icon :size="40" color="#f56c6c"><Document /></el-icon>
            <span>体检报告</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="8" :md="6" :lg="4">
          <div class="quick-action-item" @click="handleQuickAction('indicator')">
            <el-icon :size="40" color="#e6a23c"><TrendCharts /></el-icon>
            <span>健康指标</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

const router = useRouter()

// 当前日期
const currentDate = computed(() => {
  return dayjs().format('YYYY年MM月DD日 dddd')
})

// 快捷操作处理
const handleQuickAction = (action: string) => {
  const routes: Record<string, string> = {
    archive: '/health/archive',
    report: '/health/report',
    indicator: '/health/indicator'
  }

  const route = routes[action]
  if (route) {
    router.push(route)
  } else {
    ElMessage.info('功能开发中')
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.scss';

.dashboard-container {
  .welcome-card {
    margin-bottom: $spacing-lg;
    border-radius: $border-radius-xl;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.1);
    box-shadow: $shadow-md;
    overflow: hidden;
    position: relative;

    // 背景装饰
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
      border-radius: 50%;
    }

    :deep(.el-card__body) {
      position: relative;
      z-index: 1;
    }

    .welcome-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: $spacing-lg 0;

      .welcome-text {
        h2 {
          margin: 0 0 $spacing-md 0;
          font-size: 32px;
          font-weight: $font-weight-bold;
          background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        p {
          margin: 0;
          font-size: 16px;
          color: $text-secondary;
        }
      }

      .welcome-icon {
        display: flex;
        align-items: center;
        animation: float 3s ease-in-out infinite;
      }
    }
  }

  .stats-row {
    margin-bottom: $spacing-lg;

    .stats-card {
      margin-bottom: $spacing-lg;
      border-radius: $border-radius-xl;
      border: 1px solid $border-color-light;
      transition: $transition-base;
      overflow: hidden;

      &:hover {
        transform: translateY(-4px);
        box-shadow: $shadow-lg;
      }

      :deep(.el-card__body) {
        padding: $spacing-lg;
      }

      .stats-item {
        display: flex;
        align-items: center;
        gap: $spacing-md;

        .stats-icon {
          width: 64px;
          height: 64px;
          border-radius: $border-radius-lg;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: $shadow-sm;
          transition: $transition-base;
        }

        .stats-content {
          flex: 1;

          .stats-value {
            font-size: 28px;
            font-weight: $font-weight-bold;
            color: $text-primary;
            margin-bottom: 4px;
            line-height: 1;
          }

          .stats-label {
            font-size: 14px;
            color: $text-secondary;
            font-weight: $font-weight-medium;
          }
        }
      }

      &:hover .stats-icon {
        transform: scale(1.1) rotate(5deg);
      }
    }
  }

  .quick-actions-card {
    border-radius: $border-radius-xl;
    box-shadow: $shadow-md;
    border: 1px solid $border-color-light;

    :deep(.el-card__header) {
      background: linear-gradient(135deg, $bg-secondary 0%, $bg-tertiary 100%);
      border-bottom: 1px solid $border-color-light;
    }

    .card-header {
      font-size: 18px;
      font-weight: $font-weight-bold;
      color: $text-primary;
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      &::before {
        content: '';
        width: 4px;
        height: 20px;
        background: $gradient-primary;
        border-radius: $border-radius-full;
      }
    }

    .quick-action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: $spacing-md;
      padding: $spacing-xl $spacing-md;
      border-radius: $border-radius-lg;
      cursor: pointer;
      transition: $transition-base;
      background: $bg-secondary;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
        opacity: 0;
        transition: $transition-base;
      }

      &:hover {
        background: white;
        border-color: $primary-color;
        transform: translateY(-6px);
        box-shadow: $shadow-primary;

        &::before {
          opacity: 1;
        }

        .el-icon {
          transform: scale(1.2);
        }

        span {
          color: $primary-color;
          font-weight: $font-weight-semibold;
        }
      }

      .el-icon {
        transition: $transition-base;
        position: relative;
        z-index: 1;
      }

      span {
        font-size: 14px;
        color: $text-regular;
        font-weight: $font-weight-medium;
        transition: $transition-base;
        position: relative;
        z-index: 1;
      }
    }
  }
}

// 浮动动画
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
</style>
